<template>
    <div>
        用户名：<input type="text" v-model="username">
        年龄：<input type="text" v-model="age">
        对象：<input type="text" v-model="obj.user.users.name">
    </div>
    <div>
       输入消息： <input v-model="message" placeholder="请输入">
        <p>消息体： {{ message }}</p>
        <p>大写消息体：{{ bigmessage }}</p>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
const username = ref('萧炎')
const age = ref(20)
// watch(username, (newVal, oldVal) => { 
//     console.log(newVal, oldVal)
// })
watch([username, age], (newVal, oldVal) => { 
    console.log(newVal, oldVal)
})
const obj = reactive({
    user: {
        users: {
            name: '萧炎',
            age: 20
        }
        
    }
})
watch(obj, (newVal, oldVal) => { 
    console.log(newVal, oldVal);
    
},
    {
        deep: true, // 深度监听
        immediate: true // 立即执行一次


    }
)
const message = ref('')
const bigmessage = ref('')
watch(message, (newVal, oldVal) => { 
    //当message的值发生变化时 讲其转换为大写
    bigmessage.value = newVal.toUpperCase()

})

</script>

<style scoped>

</style>